<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <title>角色用户视图</title>
</head>
<body class="skin-default">

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <!--视图块-->
            <div class="container-fluid card">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <!--检索栏-->
                        <form class="form-inline search-bar" id="pageForm">
                            <!--<div class="form-group">
                                <label class="control-label">主键：&nbsp;</label>
                                <input type="text" name="id" class="form-control">
                            </div>-->
                            <div class="form-group">
                                <label class="control-label">用户编号：&nbsp;</label>
                                <input type="text" name="userId" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="control-label">姓名：&nbsp;</label>
                                <input type="text" name="userName" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="control-label">账号：&nbsp;</label>
                                <input type="text" name="account" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="control-label">性别：&nbsp;</label>
                                <select  name="sex" class="form-control">
                                    <option value=""></option>
                                    <option value="1">男</option>
                                    <option value="0">女</option>
                                </select>
                            </div>
                            <!--<div class="form-group">
                                <label class="control-label">角色编号：&nbsp;</label>
                                <input type="text" name="roleId" class="form-control">
                            </div>-->
                            <button type="button" class="btn btn-primary" onclick="joView.select()"> <i class="fa fa-search" aria-hidden="true"></i>&nbsp;查询</button>
                        </form>
                        <!--/检索栏-->
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <!--按钮栏-->
                        <div class="form-group button-bar">
                            <!--<button isShow="" type="button" class="btn btn-primary" onclick="joView.add()">
                                <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;新增
                            </button>-->
                            <button isShow="" type="button" class="btn btn-primary" onclick="relevanceUser()">
                                <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;关联用户
                            </button>
                            <button type="button" class="btn btn-danger" onclick="joView.del()">
                                <i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;删除
                            </button>
                            <button type="button" class="btn btn-warning" onclick="window.location.reload()">
                                <i class="fa fa-refresh" aria-hidden="true"></i>&nbsp;刷新
                            </button>
                        </div>
                        <!--/按钮栏-->
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-md-3 col-lg-3">
                        <ul class="ztree" id="roleTree"></ul>
                    </div>
                    <div class="col-sm-8 col-md-9 col-lg-9">
                        <div class="table-bar">
                            <!--grid-->
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover" id="mainList" dataUrl="{URL_UMS}ums/roleUser/getPage" deleteUrl="{URL_UMS}ums/roleUser/delete" formUrl="/page/ums/roleUserForm.html">
                                    <!--<col field="id" title="主键" width="15%" align="" event="click" />-->
                                    <!--<col field="userId" title="用户编号" width="15%" align=""  />
                                    <col field="roleId" title="角色编号" width="15%" align=""  />-->
                                    <col field="userName" title="姓名" width="15%" align=""/>
                                    <col field="account" title="账号" width="15%" align=""  />
                                    <col field="sex" title="性别" width="10%" align=""  />
                                    <col field="tel" title="联系电话" width="15%" align=""  />
                                    <col field="email" title="邮箱" width="20%" align=""  />
                                    <col field="state" title="状态" width="10%" align=""  />
                                </table>
                            </div>
                            <!--/grid-->

                            <!--分页条-->
                            <div class="page-bar" gridId="mainList">

                            </div>
                            <!--/分页条-->
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<style>
    html,body{
        height: 100%;
    }
</style>
<script type="text/javascript">
    //高度适配
    function heightAdapt(){
        var h = $('body').height() - $(".card>.row:eq(0)").outerHeight() - $(".card>.row:eq(1)").outerHeight() - 60;
        if(h > 300){//避免高度过于小
            $(".table-bar").css('height', h+'px').css('overflow', 'auto');
            $("#roleTree").css('height', h+'px').css('overflow', 'auto');
        }else{//默认高度为auto
            $(".table-bar").css('height', 'auto').css('overflow', 'auto');
            $("#roleTree").css('height', 'auto').css('overflow', 'auto');
        }
    }
    window.onresize = function(){
        heightAdapt();
    };
    heightAdapt();

    //关联用户
    var curRole;
    function relevanceUser(){
        if(!curRole){
            jo.showMsg('请选择待添加用户的角色', {icon:0});
            return;
        }
        jo.showDialog('<ul class="ztree" id="companyUserTreeWin"></ul>', 'companyUserTreeWin', true, {title:'选择用户', area:['400px','450px'], btn:["确定", "取消"], btnAlign:'c', success:function(){
            createCompanyUserTree('companyUserTreeWin', null, true);//创建可选的单位用户树
        }, btn1: function(idx){
            var checkedNodes = jo.getZTreeCheckedNodes('companyUserTreeWin');
            var ids = '';//勾选的用户信息
            for(var i=0;i<checkedNodes.length;i++){
                var node = checkedNodes[i];
                if(node.nodeType == 'USER'){
                    ids += ',' + node.id;
                }
            }
            if(ids){
                ids = ids.substring(1);
            }
            if(!ids){
                jo.showMsg('请选择待添加的用户', {icon:0});
                return;
            }
            jo.postAjax('{URL_UMS}ums/roleUser/relevanceUsers2Role', {roleId:curRole, userIds:ids}, function(json){
                if(json && json.code == 0){
                    jo.showMsg('关联成功', {icon:1});
                    joView.reloadCurrentPage();
                }else if(json && json.code == -1){
                    jo.showMsg(json.info, {icon:2});
                }else{
                    jo.showMsg('关联失败', {icon:2});
                }
            }, true);
            jo.close(idx);
        }});
    }

    $(function(){
        //创建左侧角色树
        createRoleTreeContainsCommonRole("roleTree",function(event,treeId,treeNode){
            //node = treeNode;
            curRole = '';
            if(treeNode.nodeType == "ROLE"){
                joView.putQueryParam("roleId", treeNode.id);
                curRole = treeNode.id;//记录角色id
                joView.select();
            }
        });
        joView.init({grid:$("#mainList"),PKName:"id",autoLoad:false});//初始化页面
        $(".page-bar").html("选择左侧角色查看该角色包含的用户列表!");
    });
    //表格渲染时行处理,参数1为当前行的数据对象,参数2为当前行的索引值(最小为0)
    joView.handleItem = function(oItem,iIndex){
        oItem.state = formatState(oItem.state);
        oItem.sex = formatSex(oItem.sex);
    };
    //表格渲染完成后的回调,参数为表格数据(数组对象)
    joView.setGridDataAfter = function(oList){

    };
    //行点击
    joView.clickItem = function(id){

    };
    //格式化性别
    function formatSex(sex){
        if(sex == 0){
            return '<span class="label label-warning">女</span>';
        }else if(sex == 1){
            return '<span class="label label-primary">男</span>';
        }else{
            return sex;
        }
    }
    //格式化状态
    function formatState(state){
        if(state == 0){
            return '<span class="label label-danger">禁用</span>';
        }else if(state == 1){
            return '<span class="label label-primary">启用</span>';
        }else{
            return state;
        }
    }
    /* 关于joView更多回调函数和配置参数可查看jo-page-view.js */
</script>
</body>
</html>
